<template>
  <el-dialog
    title="计划详情"
    :close-on-click-modal="false"
    :visible.sync="visible"
    :show-close="true"
    width="885px"
    height="900px"
    center>
    <div class="data-statistics c6-container">
      <div slot="valueform" class="tableContainer widthPage v-flex-elastic" style="height: 800px">
        <el-table v-loading="loading" :data="tableData" style="flex: 1;" border stripe>
          <el-table-column label="序号" align="center" width="55">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="lineName"
            show-overflow-tooltip
            label="检测线路"
            min-width="100px"
            align="center" />
          <el-table-column prop="directionName" label="行别" width="80" align="center" />
          <el-table-column prop="planDate" label="计划检测日期" width="105" align="center">
            <template slot-scope="scope">{{ parseTime(scope.row.planDate, '{y}-{m}-{d}') }}</template>
          </el-table-column>
          <el-table-column
            prop="planName"
            show-overflow-tooltip
            label="实施部门"
            align="center"
            min-width="150px"
            :formatter="statusFormatter" />
          <el-table-column prop="planBegin" label="计划起站" width="80" align="center" />
          <el-table-column prop="planEnd" label="计划止战" width="80" align="center" />
          <el-table-column prop="planMileage" label="检测总里程" width="100" align="center" />
          <el-table-column prop="actualDate" label="实际检测日期" width="105px" align="center">
            <template slot-scope="scope">{{ parseTime(scope.row.actualDate, '{y}-{m}-{d}') }}</template>
          </el-table-column>
        </el-table>
        <div class="block">
          <Pagination
            :hidden="false"
            :total="total"
            :page.sync="listQuery.page"
            :size.sync="listQuery.size"
            @pagination="getlist" />
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { parseTime } from '@/utils'
import { listPage } from '@/api/cms/Inspection-management/Inspection-plan-management/DetailedPlanManagement'
import { findAllUnitDeptList, railtypeList, getLineList } from '@/api/platform'
export default {
  name: 'DetailedPlanManagement',
  components: {
  },
  props: {
    cType: {
      type: String,
      default: ''
    },
    railType: {
      type: String,
      default: ''
    },
    unitDeptCode: {
      type: String,
      default: ''
    },
    year: {
      type: String,
      default: new Date().getFullYear().toString()
    }

  },
  data() {
    return {
      visible: false,
      parseTime: parseTime,
      isActive: false, // 查看详情
      ishowtan: false, // 左侧小弹窗
      loading: false,
      tableData: [],
      tableItemData: [],
      yearQuarterList: [

      ],
      total: 0,
      dialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        form: {
          id: null,
          planCode: null,
          status: null,
          deptId: null,
          cType: null,
          preparedBy: null,
          directionId: null,
          planBegin: null,
          planEnd: null,
          planMileage: null,
          planType: null,
          planDepartmentId: null,
          equipment: null,
          planExecutor: null,
          planTrainNum: null,
          enclosure: null,
          remark: null,
          approve: null,
          approvelTime: null,
          conclusion: null,
          opinion: null,
          actualDepartment: null,
          actualDate: null,
          actualBegin: null,
          actualEnd: null,
          actualTester: null,
          actualTraubNum: null,
          actualMileage: null,
          actualRemark: null,
          completeRate: null,
          deptName: null,
          actualDepartmentName: null,
          lineName: null,
          directionName: null,
          planDepartmentName: null
        }
      },
      depts: [],
      railtypes: [],
      lines: [],
      cTypeList: [
        { label: '1C', value: '1' },
        { label: '2C', value: '2' },
        { label: '4C', value: '4' }
      ],
      planTypeList: [
        { label: '1C月度计划', value: '1' },
        { label: '2C月度计划', value: '2' },
        { label: '4C月度计划', value: '4' }
      ],
      statusList: [
        { label: '审批通过', value: '10' },
        { label: '已发布', value: '20' },
        { label: '已签收', value: '30' },
        { label: '已执行', value: '40' },
        { label: '计划取消', value: '50' },
        { label: '已上传', value: '70' },
        { label: '已分析', value: '80' }
      ],
      listQuery: {
        deptId: null,
        cType: null,
        railType: null,
        lineId: null,
        status: null,
        yearMonth: null,
        year: null,
        page: 1,
        size: 20
      }
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    initPage(rowData) {
      this.listQuery = {
        deptId: null,
        cType: null,
        railType: null,
        lineId: null,
        status: null,
        yearMonth: null,
        year: null,
        page: 1,
        size: 20
      }
      this.listQuery.railType = this.railType
      this.listQuery.cType = this.cType
      this.listQuery.year = this.year ? new Date().getFullYear().toString() : this.year
      this.listQuery.unitDeptCode = rowData.unitDeptCode
      if (rowData.lineId !== null && rowData.lineId !== '') {
        this.listQuery.lineId = rowData.lineId
      }
      this.getlist()
    },
    statusFormatter(row, column, cellValue, index) {
      var label = ''
      this.statusList.forEach(item => {
        if (cellValue === item.value) {
          label = item.label
          return label
        }
      })
      return label
    },
    cTypeFormatter(row, column, cellValue, index) {
      var label = ''
      this.cTypeList.forEach(item => {
        if (cellValue === item.value) {
          label = item.label
          return label
        }
      })
      return label
    },
    planTypeFormatter(value) {
      var label = ''
      this.planTypeList.forEach(item => {
        if (value === item.value) {
          label = item.label
          return label
        }
      })
      return label
    },
    // 获取列表
    getlist() {
      this.visible = true
      this.tableData = []
      this.loading = true
      listPage(this.listQuery).then(res => {
        if (res.data) {
          this.total = res.data.total
          this.tableData = res.data.records
        }
        this.loading = false
      }).catch(_ => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.jkbg_div_left_ta4 td {
  padding: 4px 2px 4px 0px;
  font-family: "微软雅黑";
  font-size: 15px;
  border: 1px solid #dfe6ec;
  color: #000;
  background-color: #e7f3ff;
}
.jkbg_div_left_ta4 {
  margin-top: 2%;
}

.jkbg_div_left_ta4 td.bg_lan {
  word-break: keep-all;
  background-color: #e2f1f6;
  white-space: pre-wrap;
  white-space: nowrap;
}

.jkbg_div_left_ta4 td.left {
  //width: 10.5%;
  text-align: center;
  background-color: "#fff";
}

.jkbg_div_left_ta4 td.right {
  //width: 1.5%;
  text-align: center;
}

.inTbleStyle tr td:first-child {
  width: 40px;
}

.inTbleStyle tr td:nth-child(3) {
  width: 30px;
}

.jkbg_div_left_ta4 tr td:first-child {
  width: 30px;
}

.inTbleStyle td {
  padding: 4px 2px 4px 0px;
  font-family: "微软雅黑";
  font-size: 15px;
  border: 0px solid #dfe6ec;
  color: #000;
  background-color: #ffffff;
  width: 30%;
  text-align: left;
}
/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
  font-size: 24px;
  display: block;
}
</style>
